<template>
  <div class="app-container">
    <el-button type="danger" icon="el-icon-paperclip" @click="history" round
      >资料详情</el-button
    >

    <el-button
      type="warning"
      icon="el-icon-picture-outline"
      @click="show_proc"
      round
      >流程图</el-button
    >

    <el-button
      type="warning"
      icon="el-icon-picture-outline"
      @click="history_click"
      round
      >任务明细</el-button
    >

    <el-button type="danger" icon="el-icon-folder" @click="attach" round
      >附件</el-button
    >

    <div class="search" style="float: right">
      <el-select
        v-model="listQuery.def"
        clearable
        filterable
        placeholder="请选择流程"
      >
        <el-option
          v-for="item in defs"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <el-select
        style="margin-left: 10px"
        v-model="listQuery.apply"
        filterable
        clearable
        placeholder="请选择申请人"
      >
        <el-option
          v-for="item in users"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>

      <el-date-picker
        style="margin-left: 10px"
        v-model="startDate"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
      >
      </el-date-picker>

      <el-input
        placeholder="任务名称"
        style="width: 200px; margin-left: 10px"
        @keyup.enter.native="refreshList"
        v-model="listQuery.s"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>

      <el-button
        style="margin-left: 10px"
        @click="refreshList"
        icon="el-icon-search"
        round
        >查询</el-button
      >
    </div>

    <el-table
      v-loading="listLoading"
      ref="singleTable"
      element-loading-text="Loading"
      :data="list"
      @row-click="handleSelectionChange"
      fit
      highlight-current-row
    >
      <!--<el-table-column prop="id" label="ID"></el-table-column>-->
       <el-table-column label="序号" width="50">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="processDefinitionName"
        label="流程"
      ></el-table-column>
      <el-table-column prop="name" label="任务名称"></el-table-column>
      <el-table-column prop="startUserId" label="申请人"></el-table-column>
      <el-table-column prop="startTime" label="提交日期"></el-table-column>
      <el-table-column prop="taskNames" label="流程进度"></el-table-column>
      <el-table-column prop="endDate" label="结束日期"></el-table-column>
      <el-table-column prop="durationInDay" label="持续时间"></el-table-column>

      <!--
          <el-table-column prop="candidateUsers" label="候选人"></el-table-column>
      <el-table-column prop="candidateGroups" label="候选组"></el-table-column>
      <el-table-column prop="endDate" label="结束时间"></el-table-column>
         --->
    </el-table>

    <div class="block" style="float: right">
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="listQuery.limit"
        :current-page="listQuery.page"
        :total="listQuery.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {
  procList,
  startProc,
  BASEURL,
  procMyTodo,
  taskList,
  instList
} from '@/api/workflow'

import { all } from '@/api/users'
import { UserModule } from '@/store/modules/user'
import { twoTimeInterval } from '@/utils/common'
import { start } from 'repl'
@Component({
  name: 'proc-inst'
})
export default class extends Vue {
  private list: any = []
  private listLoading = true
  private listQuery = {
    page: 1,
    limit: 10,
    total: 0,
    bdate: '',
    edate: '',
    startDate: '',
    apply: '',
    def: '',
    s: ''
  }

  private attach() {
    if (!this.selectRow) {
      this.$alert('请选择要操作的任务')
      return
    }
    this.$router.push({
      path: '/workflow/proc-attachment',
      query: {
        instid: this.selectRow.id
      }
    })
  }

  private history_click() {
    if (this.selectRow) {
      this.$router.push({
        path: '/workflow/task-list',
        query: {
          id: this.selectRow.id
        }
      })
    } else {
      this.$alert('请选择要处理的流程', '系统提示', {
        confirmButtonText: '确定',
        callback: (action) => {}
      })
    }
  }
  private defs: any[] = []
  private async procDef() {
    const { data } = await procList(this.listQuery)
    this.defs = data
  }

  private pickerOptions = {
    shortcuts: [
      {
        text: '最近一周',
        onClick(picker: any) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          picker.$emit('pick', [start, end])
        }
      },
      {
        text: '最近一个月',
        onClick(picker: any) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          picker.$emit('pick', [start, end])
        }
      },
      {
        text: '最近三个月',
        onClick(picker: any) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          picker.$emit('pick', [start, end])
        }
      }
    ]
  }

  private users: any = []
  //获取所有用户
  private async allusers() {
    const { data } = await all({})
    this.users = data.rows;
    console.log(data);
  }
  handleCurrentChange(page: any) {
    this.listQuery.page = page
    this.getList()
  }
  created() {
    this.getList()
    this.allusers()
    this.procDef()
  }
  refreshList() {
    this.getList()
  }
  /**
   * 任务详情
   */
  history() {
    if (this.selectRow) {
      this.$router.push({
        path: '/workflow/proc-history',
        query: {
          id: this.selectRow.id
        }
      })
    } else {
      this.$alert('请选择要处理的流程', '系统提示', {
        confirmButtonText: '确定',
        callback: (action) => {}
      })
    }
  }
  /**
   * 显示流程图
   */
  show_proc() {
    if (this.selectRow) {
      this.$router.push({
        path: '/workflow/proc-image',
        query: {
          id: this.selectRow.endDate
            ? this.selectRow.processDefinitionId
            : this.selectRow.id
        }
      })
    } else {
      this.$alert('请选择要处理的流程', '系统提示', {
        confirmButtonText: '确定',
        callback: (action) => {}
      })
    }
  }
  private selectRow: any
  handleSelectionChange(val: any) {
    this.selectRow = val
  }

  private startDate: any = []

  private async getList() {
    this.listLoading = true
    if (this.startDate.length == 2) {
      this.listQuery.bdate = this.startDate[0]
      this.listQuery.edate = this.startDate[1]
    }

    //this.listQuery.startDate='';
    const { data } = await instList(this.listQuery)
    var page: any = data.ls
    ;(page || []).forEach((it: any) => {
      //it.durationInMillis = it.durationInMillis || 0
      it.durationInDay = twoTimeInterval(it.startTime, it.endDate || new Date())
    })
    this.list = data.ls
    this.listQuery.total = data.total
    //this.listQuery.total = data.total
    // Just to simulate the time of the request
    this.listLoading = false
  }
}
</script>
